<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/layouts/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>新增栏目</title>
</head>
<body>
	<div class="page-container">
	<form action="" method="post" class="form form-horizontal" id="form-category-add">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>栏目名称：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="请输入栏目名称" id="name" name="name">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>英文名称：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="请输入栏目英文名称" id="enName" name="enName">
			</div>
		</div>
		<c:if test="${parentCategory != null }">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">父目录：</label>
			<div class="formControls col-xs-8 col-sm-9">
				${parentCategory.name }
				<input type="hidden"  value="${parentCategory.id }"  id="parentId" name="parentId">
			</div>
		</div>
		</c:if>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>列表页模板：</label>
			<div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
				<select name="listTemplate" class="select">
					<option value="1">测试列表页模板</option>
					<c:forEach items="${listTemplates }" var="list">
						<option value="${list.id }">${list.name }</option>
					</c:forEach>
				</select>
				</span> </div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>内容页模板：</label>
			<div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
				<select name="contentTemplate" class="select">
					<option value="2">测试内容页模板</option>
					<c:forEach items="${contentTemplates }" var="content">
						<option value="${content.id }">${content.name }</option>
					</c:forEach>
				</select>
				</span> </div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">是否显示：</label>
			<div class="formControls col-xs-8 col-sm-9 skin-minimal">
				<div class="check-box">
					<input type="checkbox" id="isShow"  name="isShow"	 checked="checked"	>
					<label for="checkbox-1">&nbsp;</label>
				</div>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">栏目模型：</label>
			<div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
				<select name="model" class="select"  id="model" >
						<option value="">请选择栏目模型</option>
						<option value="1">普通文章</option>
						<option value="2">封面频道</option>
						<option value="3">外部链接</option>
				</select>
				</span> 
			</div>
		</div>
		<div class="row cl"  id="linkInput"  style="display: none;">
			<label class="form-label col-xs-4 col-sm-2">链接地址：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" name="listUrl" id="listUrl" placeholder="" value="" class="input-text">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">target：</label>
			<div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
				<select class="select" size="1" name="target">
					<option value="_blank"  selected>_blank</option>
					<option value="_self">_self</option>
					<option value="_parent">_parent</option>
					<option value="_top">_top</option>
					<option value="mainFrame">mainFrame</option>
				</select>
				</span> </div>
		</div>
		<div class="row cl" >
			<label class="form-label col-xs-4 col-sm-2">SEO标题：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" name="seoTitle" id="seoTitle" placeholder="这里输入SEO标题" value="" class="input-text">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">关键字：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<textarea name="keywords" cols="" rows="" class="textarea"  placeholder="这里输入SEO关键字" onKeyUp="$.Huitextarealength(this,1000)"></textarea>
				<p class="textarea-numberbar"><em class="textarea-length">0</em>/1000</p>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">描述：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<textarea name="description" cols="" rows="" class="textarea"  placeholder="这里输入SEO描述" onKeyUp="$.Huitextarealength(this,1000)"></textarea>
				<p class="textarea-numberbar"><em class="textarea-length">0</em>/1000</p>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<button  class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存</button>
				<button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
			</div>
		</div>
	</form>
	</div>
	<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="${ctxLib }/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="${ctxLib }/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${ctxStatic }/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="${ctxStatic }/h-ui.admin/js/H-ui.admin.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="${ctxLib }/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="${ctxLib }/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="${ctxLib }/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="${ctxLib }/shopUtil.js?v=1.0"></script>
<script type="text/javascript" src="${ctxLib }/pinyin.js"></script>
<script type="text/javascript">
$(function(){
	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	});
	$('#model').click(function(){
		if($(this).val() == 3){
			$('#linkInput').show();
		}else{
			$('#linkInput').hide();
		}
	});
	
	$("#name").blur(function(){
		name = $(this).val();
		if(name != null && name != ""){
			$("#enName").val(pinyin.getCamelChars(name).toLowerCase());
		}else{
			$("#enName").val("");
		}
	})
	
	$("#form-category-add").validate({
		rules:{
			name:{
				required:true,
				minlength:2,
				maxlength:16
			},
			enName:{
				required:true,
				minlength:2,
				maxlength:16
			},
			model:{
				required:true
			}
		},
		messages: {
			name: {
		        required: "请输入栏目名称"
		      },
		      enName: {
		        required: "请输入英文名称"
		      },
		      model: {
		        required: "请选择栏目模型"
		      }
	    },
		onkeyup:false,
		focusCleanup:true,
		success:"valid",
		submitHandler:function(form){
				if($('#model').val() == 3 && ($('#listUrl').val() == '' || $('#listUrl').val() == null)){
					layer.alert("模型选择外链时,链接地址不能为空");
				}
				var formData = ShopUtil.formToJSON();
				if($('input[name="isShow"]').prop("checked")){
					formData.isShow = true;
		        }else{
		        	formData.isShow = false;
		        }
				console.log(formData);
				$.ajax({
                    type: 'POST',
                    url: $ctx + '/a/category/add',
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify(formData),
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            layer.alert('新增成功', {
                            	  closeBtn: 0
                            }, function(){
                            	window.parent.location.reload();
                            	var index = parent.layer.getFrameIndex(window.name);
                            	parent.layer.close(index);
                           	});
                        } else {
                            layer.alert(data.message);
                        }
                    }
                });
			}
		});
	});
</script>
</body>
</html>